// 全局设置  Jquery 请求为同步
$.ajaxSetup({
    async: false
});

// 渲染分类标题
(function () {
    $.get('http://chst.vip:1234/api/getbrandtitle', (res) => {
        console.log(res);
        let result = res.result
        let ele = ''
        result.forEach(item => {
            ele += `
                <div class="panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="javascript:;" class="titleid" brandtitleid="${item.brandTitleId}">
                            <span>${item.brandTitle}</span>
                            <i class="fr">▼</i>
                        </a>
                    </h4>
                </div>
                <div class="collapseOne">
                    <div class="panel-body">
                        <div class="container">
                            <div class="row">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            `
        });
        $('#tablist').html(ele)
    })
})();

// 渲染标题对应的分类
(function () {
    $('#tablist .titleid').each(function (i) {
        fetch('http://chst.vip:1234/api/getbrand?brandtitleid=' + $(this).attr('brandtitleid'))
            .then(response => {
                return response.json()
            }).then(data => {
                let res = data.result
                // console.log(res);
                let el = ''
                res.forEach((item, i) => {
                    el += `
                    <div class="coll">
                        <a href="brand.html?brandtitleid=${item.brandTitleId}">
                            <i>${i}</i>${item.brandName}
                            <div class="sel">${item.brandInfo}</div>
                        </a>
                    </div>
                    `
                });
                $('.row').eq(i).html(el)

                // 前三个添加颜色
                $('.row').eq(i).find('.coll').eq(0).find('i').css('background', 'red');
                $('.row').eq(i).find('.coll').eq(1).find('i').css('background', '#FFA500');
                $('.row').eq(i).find('.coll').eq(2).find('i').css('background', '#ADFF2F');
            });
    })
})();

// 实现抽屉效果
(function () {
    $('#tablist').find('.collapseOne').slideUp(0)
    $('#tablist').on('click', '.panel-heading', function () {
        // console.log(22);
        $(this).siblings('.collapseOne').stop().slideToggle().parents('.panel-default').siblings('.panel-default').find('.collapseOne').slideUp()
    })
})();

